//1.引入vue
import Vue from "vue";
//2.引入 路由插件
import VueRouter from "vue-router";
//3.使用路由插件
Vue.use(VueRouter)

//引入路由组件
import Loagin from '@/pages/Loagin/Loagin'
import Home from '@/pages/Home/Home'
import Movie from '@/pages/Home/Movie/Movie'
import Music from '@/pages/Home/Music/Music'

//4.配置路由器对象
export default new VueRouter({
  //在实例化路由器对象的配置中,书写路由表配置
  routes: [{
    path: '/home',
    component: Home,
    //子组件
    children: [
      //默认子路由
      // {
      //   path: '',
      //   redirect: '/home/music'
      // },
      {
        name: 'movie',
        path: 'movie',
        component: Movie,
        //路由配置中props第三种写法(函数)将函数返回的那个对象中每一组key-value都以props的形式传递给路由组件,函数默认接收一个route对象做为参数，可以快速拿query的值
        props(route) {
          return route.query
        }
      }, {
        name: 'music',
        //一个“路径参数”使用冒号:标记,也可以在路径参数后书写问号表示可选
        path: 'music/:id/:num?',
        component: Music,
        //路由配置中props的第一种写法（布尔值），作用：将路由所收到的所有的params参数，都以props的形式传递给路由组件
        props: true
      }
    ]
  }, {
    path: '/Loagin',
    component: Loagin
  }, {
    path: '/',
    //路由重定向
    redirect: '/home'
  }]
})